---
title: "Row Grouping - Opening Groups"
enterprise: true
---

This section covers different ways to control how row groups are expanded and collapsed.

## Opening Group Levels by Default

To open all groups down to a given group level use the `groupDefaultExpanded` grid option as shown below:

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: 'country', hide: true, rowGroup: true },
        { field: 'year', hide: true, rowGroup: true },
        { field: 'sport' },
        { field: 'total' }
    ],
    // all 'country' row groups will be open by default
    groupDefaultExpanded: 1
}
```

In the snippet above, all `country` row groups will be expanded by default as `groupDefaultExpanded = 1`.

By default `groupDefaultExpanded = 0` which means no groups are expanded by default. To expand all row groups
set `groupDefaultExpanded = -1`.

The example below demonstrates the `groupDefaultExpanded` behaviour. Note the following:

* There are two active row groups as the supplied `country` and `year` column definitions have `rowGroup=true` declared.

* All `country` row groups are expanded by default as `groupDefaultExpanded = 1`.

{% gridExampleRunner title="Group Default Expanded" name="group-default-expanded"  exampleHeight=540 /%}

## Open Groups by Default

To have groups open by default, implement the grid callback `isGroupOpenByDefault`. This callback is invoked
each time a group is created.

```js {% frameworkTransform=true %}
const gridOptions = {
    // expand when year is '2004' or when country is 'United States'
    isGroupOpenByDefault: params => {
        return (params.field == 'year' && params.key == '2004') ||
            (params.field == 'country' && params.key == 'United States');
    }
}
```

The params passed to the callback have the `IsGroupOpenByDefaultParams` interface:

{% interfaceDocumentation interfaceName="IsGroupOpenByDefaultParams" /%}

In the example below, the country 'United States' and year '2004' are expanded by default. Note that year '2004' is expanded for all
countries, not just 'United States'.

{% gridExampleRunner title="Open by Default" name="open-by-default"  exampleHeight=515 /%}

## Expand / Collapse Groups via API

It is possible to expand and collapse all group rows using the `expandAll()` and `collapseAll()` grid API's as shown below:

{% apiDocumentation source="grid-api/api.json" section="rowGroupsCols" names=["expandAll", "collapseAll"] /%}

When more custom behaviour is required, obtain a reference to the rowNode and then call `api.setRowNodeExpanded(rowNode, boolean)`.

{% apiDocumentation source="grid-api/api.json" section="rowGroupsCols" names=["setRowNodeExpanded"] /%}

For example, to expand a group with the name 'United States' would be done as follows:

```js {% frameworkTransform=true %}
api.forEachNode(node => {
    if (node.key === 'United States') {
        api.setRowNodeExpanded(node, true);
    }
});
```

The following example demonstrates different ways to expand / collapse row groups via the grid API.

{% gridExampleRunner title="Expand / Collapse Groups via API" name="expand-collapse-api"  exampleHeight=515 /%}


## Expanding Groups & Vertical Scroll Location

Depending on your scroll position the last item's group data may not be visible when clicking on the expand icon.

You can resolve this by using the function `api.ensureIndexVisible()`. This ensures the index is visible, scrolling the table if needed.

In the example below, if you expand a group at the bottom, the grid will scroll so all the children of the group are visible.

{% gridExampleRunner title="Row Group Scroll" name="row-group-scroll" /%}


## Next Up

Continue to the next section to learn about grouping with [Complex Objects](./grouping-complex-objects/).
